

<!--
All rights Reserved, Designed By www.youyacao.com
@Description:短视频配置
@author:成都市一颗优雅草科技有限公司
@version V4.2
注意：本前端源码遵循 MIT开源协议本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584
开源gitee地址：https://gitee.com/youyacao/songshu-video-page
 -->



<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-calendar"></i> 站点配置
        </el-breadcrumb-item>
        <el-breadcrumb-item>视频配置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="form-box">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="游客完整版免费试看时间">
            <el-input v-model="form.video_free_time" placeholder="设置为0表示不限制观看时间,针对游客完整版试看"></el-input>
          </el-form-item>

          <el-form-item label="用户免费试看次数">
            <el-input v-model="form.video_free_num" placeholder="设置为0表示不限制次数"></el-input>
          </el-form-item>
          <el-form-item label="邀请1位用户获得的免费观影次数">
            <el-input v-model="form.invit_free_num" placeholder="设置为0表示不限制次数,针对邀请码邀请1位用户"></el-input>
          </el-form-item>



          <el-form-item label="广告间隔(个)">
            <el-input v-model="form.advert_count" placeholder="设置为0表示不启用视频广告"></el-input>
          </el-form-item>
          <el-form-item label="视频水印">
            <el-radio v-model="form.watermark_status" label="1">启用</el-radio>
            <el-radio v-model="form.watermark_status" label="0">禁用</el-radio>
          </el-form-item>
          <el-form-item label="视频水印路径">
            <el-image v-show="form.watermark_path" class="type-icon" :preview-src-list="[$utils.formatUrl(form.watermark_path)]"
                      :src="$utils.formatUrl(form.watermark_path)"></el-image>
            <el-upload
              class="upload-demo"
              :limit="1"
              :show-file-list="false"
              :data="{type:'img'}"
              :action="$store.state.frontUrl+'/api/api/upload'"
              :file-list="fileList"
              list-type="picture"
              :on-success="uploadVideoSuccess"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <el-input type="text" placeholder="图片地址" v-model="form.watermark_path"></el-input>
          </el-form-item>
          <el-form-item label="视频水印位置" v-if="form.watermark_status=='1'">
            <el-radio v-model="form.watermark_position" label="left_top">左上</el-radio>
            <el-radio v-model="form.watermark_position" label="right_top">右上</el-radio>
            <el-radio v-model="form.watermark_position" label="left_bottom">左下</el-radio>
            <el-radio v-model="form.watermark_position" label="right_bottom">右下</el-radio>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import qs from 'Qs'

  export default {
    name: 'baseform',
    data() {
      return {
        form: {},
        fileList:[]
      };
    },
    created() {
      this.getData();
    },
    methods: {
      getData() {
        this.$api.config.get({}).then((res) => {
          this.form = res.data;
        });
      },
      uploadVideoSuccess (response, file, fileList) {
        if (response.code === 0) {
          if(response.data.img==null){
            this.form.watermark_path = response.data.url;
            this.fileList = []
            return;
          }
          this.form.url = response.data.url
          this.form.watermark_path = response.data.img
          this.fileList = []
        } else {
          this.fileList = []
          this.$message.error('上传失败,' + response.msg)
        }
      },
      onSubmit() {
        var data = [];
        for (let item in this.form) {
          data[`config[${item}]`] = this.form[item];
        }
        console.log(data);
        this.$api.config.set(qs.stringify(data)).then((res) => {
          console.log(res.data);
        });
        this.$message.success('提交成功！');
      }
    }
  };
</script>
